<script setup lang="ts">
import * as echarts from 'echarts'
import { nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'

const props = defineProps<{
  guageType: string
  chartData: any
}>()

// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}
const bottomPercent = ref('') //百分百比数值
const bottomData = ref('') //区域信息数值
const changeFlag = ref(false) //动画切换
var timeTicket = null //定时器
let myChart: echarts.ECharts
let option = {}
const createChart = () => {
  // 判断是否能获取到dom,如果不能直接结束
  const theDom = document.getElementById(props.chartData.name)
  if (!theDom) {
    return ''
  }
  myChart = echarts.init(document.getElementById(props.chartData.name))
  option = {
    tooltip: {
      // trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)', //默认值，提示背景颜色，默认为透明度为0.7的黑色
      padding: [
        changePixelSize(10), // 上
        changePixelSize(20), // 右
        changePixelSize(10), // 下
        changePixelSize(20), // 左
      ],

      textStyle: {
        fontSize: changePixelSize(12),
        color: '#fff', //设置文字颜色
      },
      axisPointer: {
        type: 'shadow',
      },
    },
    series: [
      {
        type: 'gauge',
        //刻度标签
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
          roundCap: true,
          lineStyle: {
            width: 10,
            color: [
              [0.3, '#67e0e3'],
              [0.7, '#37a2da'],
              [1, '#fd666d'],
            ],
          },
        },
        pointer: {
          width: 2,
          itemStyle: {
            color: '#5DF5F3',
          },
        },
        //罗盘上小指针
        axisTick: {
          show: false,
          distance: -10,
          length: 8,
          lineStyle: {
            color: 'inherit',
            width: 2,
          },
        },
        //罗盘上分割刻度
        splitLine: {
          show: false,
          distance: -10,
          length: 10,
          lineStyle: {
            color: 'red',
            width: 4,
          },
        },
        detail: {
          show: false,
          valueAnimation: true,
          formatter: '{value}%',
          color: '#5DF5F3',
          fontSize: 20,
        },
        data: [
          {
            value: props.chartData.completedRate,
          },
        ],
      },
    ],
  }

  myChart.setOption(option)
}

// 动画 0 和 value 切换
const changeV = () => {
  if (changeFlag.value) {
    changeFlag.value = false
    return props.chartData.completedRate
  } else {
    changeFlag.value = true
    return 0
  }
}

const addChangeValue = () => {
  timeTicket = setInterval(function () {
    if (myChart) {
      myChart.setOption({
        series: [
          {
            data: [
              {
                value: changeV(),
              },
            ],
          },
        ],
      })
    }
  }, 3500)
}

watch(
  () => props.chartData,
  () => {
    //处理精度问题
    bottomPercent.value = props.chartData.completedRate.toString() + '%'
    bottomData.value =
      props.chartData.name + '(' + props.chartData.targetType + ')'
    nextTick(() => {
      myChart.setOption(option)
    })
  },
  { deep: true }
)

onMounted(() => {
  //处理精度问题
  bottomPercent.value = props.chartData.completedRate.toString() + '%'
  bottomData.value =
    props.chartData.name + '(' + props.chartData.targetType + ')'
  nextTick(() => {
    createChart()
    //addChangeValue()
  })
})

// 销毁前释放内存
onBeforeUnmount(() => {
  clearInterval(timeTicket)
  timeTicket = null
  if (myChart) {
    myChart.dispose()
  }
})
</script>

<template>
  <div
    :class="{
      'echart-box': props.guageType === 'footer',
      'echart-box-260': props.guageType !== 'footer',
    }"
  >
    <div class="totalContainer">
      <div class="chartContainer">
        <div class="chart" :id="chartData.name"></div>
        <img class="guageImg" src="@/assets/images/finance/finance-guage.png" />
      </div>
      <div class="bottomPercent">{{ bottomPercent }}</div>
      <div class="bottomData">{{ bottomData }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.echart-box-260 {
  position: relative;
  width: calc(260px - 45px);
  height: calc(260px - 45px);
  margin: auto;
  .totalContainer {
    position: relative;
    padding-top: 10%;
    width: 80%;
    height: 80%;
    margin: auto;
  }
  .bottomPercent {
    margin-top: -40px;
    height: 20px;
    line-height: 20px;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    color: #5df5f3;
    text-align: center;
    align-items: center;
  }
}

.echart-box {
  margin-top: 20%;
  position: relative;
  width: 100%;
  height: 80%;

  .totalContainer {
    padding-bottom: 20%;
    position: relative;
    width: 80%;
    height: 90%;
    margin: auto;
  }
  .bottomPercent {
    margin-top: calc(82px - 100%);
    height: 20px;
    line-height: 20px;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    color: #5df5f3;
    text-align: center;
    align-items: center;
    margin-left: auto;
  }
}
.chartContainer {
  position: relative;
  width: 100%;
  height: 100%;
}
.chart {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.guageImg {
  width: 100%;
  height: auto;
  z-index: 1;
}
.bottomData {
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-align: center;
  align-items: center;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  margin-top: 10px;
}

.dialog-box {
  height: calc(500px - 45px);
}
</style>
